<template>
    <div class="section_common">
        <div class="main">
            <el-form ref="form" label-width="100px">

                <el-form-item label="区域">
                    <el-input v-model="area" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="所属地点">
                    <el-input v-model="place" size="mini"></el-input>
                </el-form-item>

                <el-form-item label="部门/组别">
                    <el-input v-model="dept" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="报废类型">
                    <el-radio v-model="classification" label="个人">个人</el-radio>
                    <el-radio v-model="classification" label="公共">公共</el-radio>
                </el-form-item>
                <el-form-item label="物品分类" required>
                    <el-radio v-model="type" label="办公用品">办公用品</el-radio>
                    <el-radio v-model="type" label="固定资产">固定资产</el-radio>
                </el-form-item>

                <p>需报废的物品</p>
                <el-form-item label="物品名称" required>
                    <el-input v-model="pname" size="mini"></el-input>
                </el-form-item>


                <el-form-item label="物品规格" required>
                    <el-input v-model="specification" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="数量" required>
                    <el-input v-model="number" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="报废原因">
                    <el-input v-model="sqreason" size="mini"></el-input>
                </el-form-item>

                <el-form-item id="bhreason" style="display: none" label="驳回原因" required>
                    <el-input v-model="reason" size="mini"></el-input>
                </el-form-item>

                <div class="upload_area">
                    <van-steps direction="vertical" :active="active" active-icon="checked" active-color="#38f">
                        <p style="font-size:16px;font-weight: 900">审批流程</p>

                        <van-step v-if="oneShow">
                            <h3>一级审批</h3>
                            <van-image v-for="(item,index) in onespusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                            </van-image>
                        </van-step>

                        <van-step v-if="twoShow">
                            <h3>二级审批</h3>
                            <van-image v-for="(item,index) in twospusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                            </van-image>
                        </van-step>

                        <van-step v-if="threeShow">
                            <h3>三级审批</h3>
                            <van-image v-for="(item,index) in threespusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                            </van-image>
                        </van-step>
                        <van-step v-if="fourShow">
                            <h3>四级审批</h3>
                            <van-image v-for="(item,index) in fourspusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                            </van-image>
                        </van-step>

                        <van-step v-show="zdShow">
                            <p style="font-size:16px;font-weight: 900">审批人</p>
                            <van-image v-for="item in twoLd" :key="item.name" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                            </van-image>
                        </van-step>
                        <van-step v-show="zdrzShow">
                            <p style="font-size:16px;font-weight: 900">审批人</p>
                            <van-image v-for="item in threeLd" :key="item.name" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                            </van-image>
                        </van-step>

                        <!--            <van-step v-show="fourShow">
                                      <p style="font-size:16px;font-weight: 900">副经理</p>
                                      <van-image v-for="item in fourLd" :key="item.name" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                                        <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                                      </van-image>
                                    </van-step>-->

                    </van-steps>
                </div>

                <el-form-item>
                    <el-button v-bind:disabled="true" type="primary" size="mini">{{result}}</el-button>
                    <el-button v-show="!cxshow" type="primary" size="mini" @click="onDel">撤销</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import {Calendar, Form, Picker, Popup, Toast} from "vant";
    import { Image as VanImage } from 'vant';
    Vue.use(VanImage);
    Vue.use(Calendar);
    Vue.use(Form);
    Vue.use(Picker);
    Vue.use(Popup);
    export default {
        data() {
            return {
                area:"",
                place:"",
                areasField:[],
                type:"",
                dept:"",
                pname:"",
                number:"",
                specification:"",
                sqreason:"",
                classification:"",
                reason:"",
                result:"",
                cxshow:false,

                nowUser:"",
                title: "物品报废申请详情",

                active:"-1",//步骤索引,从0开始
                oneShow:false,
                twoShow:false,
                threeShow:false,
                fourShow:false,
                onespusers:[],
                twospusers:[],
                threespusers:[],
                fourspusers:[],

                zdShow:true,
                twoLd:[],
                zdrzShow:true,
                threeLd:[],
            };
        },
        created() {
            this.nowUser=JSON.parse(localStorage.getItem('userInfo')).userId;

            this.id= this.$route.params.id;
            this.getInvScrapInfo();
        },
        methods: {

            getLd(){
                this.$https.post('/mobiles/getInvScrapSp',{
                    nowUser:this.nowUser,
                }).then((res)=>{

                    if (res.data.data.onespusers && res.data.data.onespusers.length>0){
                        this.oneShow=true;
                        this.onespusers=res.data.data.onespusers;
                    }else{
                        this.oneShow=false;
                        this.onespusers=[];
                    }
                    if (res.data.data.twospusers && res.data.data.twospusers.length>0){
                        this.twoShow=true;
                        this.twospusers=res.data.data.twospusers;
                    }else{
                        this.twoShow=false;
                        this.twospusers=[];
                    }
                    if (res.data.data.threespusers && res.data.data.threespusers.length>0){
                        this.threeShow=true;
                        this.threespusers=res.data.data.threespusers;
                    }else{
                        this.threeShow=false;
                        this.threespusers=[];
                    }
                    if (res.data.data.fourspusers && res.data.data.fourspusers.length>0){
                        this.fourShow=true;
                        this.fourspusers=res.data.data.fourspusers;
                    }else{
                        this.fourShow=false;
                        this.fourspusers=[];
                    }

                    if (res.data.data.twoLd.length>0){
                        this.zdShow=true;
                        this.twoLd=res.data.data.twoLd;
                    }
                    if (res.data.data.threeLd.length>0){
                        this.zdrzShow=true;
                        this.threeLd=res.data.data.threeLd;
                    }
                }).catch(err => {
                    console.log(err);
                })
            },

            getInvScrapInfo(){
                this.$https.post('/mobiles/getInvScrapInfo',{
                    nowUser:this.nowUser,
                    id:this.id
                }).then((res)=>{
                    this.applicant=res.data.data.applicant;
                    this.getLd();
                    this.area=res.data.data.area;
                    this.place=res.data.data.place;
                    this.type=res.data.data.type;
                    this.dept=res.data.data.dept;
                    this.pname=res.data.data.pname;
                    this.classification=res.data.data.classification;
                    this.number=res.data.data.number;
                    this.specification=res.data.data.specification;
                    this.sqreason=res.data.data.sqreason;
                    this.result=res.data.data.result;
                    this.active=res.data.data.agree-1;
                    if (res.data.data.result!="审核中"){
                        this.cxshow=true;
                    }
                    if (res.data.data.result=='已驳回'){
                        this.reason=res.data.data.reason;
                        document.getElementById("bhreason").style.display= "";
                    }

                }).catch(err => {
                    console.log(err);
                })
            },

            // 返回
            goBack() {
                this.$router.go(-1);
            },
            onDel(){
                this.cxshow=true;
                this.$https.post('/mobiles/delInvscrapSp',{
                    nowUser:this.nowUser,
                    id:this.id
                }).then((res)=>{
                    if (res.data.code==200){
                        Toast("已撤销");
                    }else {
                        Toast(res.data.message);
                    }
                })
            }

        },
    };
</script>

<style lang="scss" scoped>
    .main {
        background-color: white;
        .el-form {
            padding-right: 10px;
            .el-form-item {
                .el-form-item__label {
                    line-height: 16px;
                }
                margin-bottom: 5px;
            }
        }
    }
</style>
